<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>客户端</title>
</head>

<body>
    <h2>通过后台内置的数据</h2>
    <input type="text" placeholder="输入id进行查询">
    <button>查询</button>
    <table border="1">
        <thead>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </thead>
        <tbody>
            <tr>
                <td id="uid"></td>
                <td id="name"></td>
                <td id="age"></td>
            </tr>
        </tbody>

    </table>
    <h2>通过数据库查询</h2>
    <input type="text" id="ipt2" placeholder="请输入用户名进行查询">
    <button id="btn2">查询</button>
    <table border="1" id="table2">
        <thead>
            <th>ID</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>邮箱</th>
            <th>电话</th>

        </thead>
        <tbody>
            <tr>
                td
            </tr>
        </tbody>

    </table>
    <script>
        var ipt = document.querySelector('input');
        var btn = document.querySelector('button');
        var tr = document.querySelector('tbody tr')
        var ipt2 = document.querySelector('#ipt2');
        var btn2 = document.querySelector('#btn2');
        var tbody2 = document.querySelector('#table2 tbody ')

        btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            var id = ipt.value
            xhr.open('GET', `http://127.0.0.1:3000/user?id=${id}&&a=2&&c=3`);
            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {

                    var data = JSON.parse(xhr.responseText)
                    console.log(data)

                    showData(data)
                }
            }

            function showData(data) {
                var obj = data[0]
                console.log(obj)
                document.getElementById('uid').innerText = obj.id;
                document.getElementById('name').innerText = obj.name;
                document.getElementById('age').innerText = obj.age;
            }

            function showUserInfo(data) {
                var html = `<td>${data.id}</td>
                <td>${data.name}</td>
                <td>${data.age}</td>`
                tr.innerHTML = html
            }
        }

        btn2.onclick = function() {
            if (ipt2.value == null) {
                return
            }
            var xhr = new XMLHttpRequest();

            xhr.open('GET', `http://127.0.0.1:3000/mysql?username=${ipt2.value}`);

            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {

                    var data = JSON.parse(xhr.responseText)

                    // showData(data)

                }
            }
        }



        function showMysqlData(data) {
            var html = ``
            data.forEach(function(el) {
                var str = `<tr>
                    <td>${el.id}</td>
                    <td>${el.username}</td>
                    <td>${el.name}</td>
                    <td>${el.age}</td>
                    
                    <td>${el.email}</td>
                    <td>${el.telephone}</td>
                </tr>`
                html += str

            });
            tbody2.innerHTML = html
        }
    </script>
</body>

</html>